<template>
  <div class="title-box">
    <div class="title-container">
      <h2 class="title">热词云图</h2>
    </div>
    <div id="bubbleChart"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: "",
      dataList:[]
    };
  },
  computed:{
    sum(){
      return this.dataList.reduce((acc, item) => acc + item.value[0], 0)
    },
    avg() {
      return this.sum / this.dataList.length
    }
  },
  mixins: [echartMixins],
  mounted() {
    this.initChart();
    this.fetchList()
  },
  methods: {
    async fetchList() {
      const response = await this.$http.get("metrics/keyword-counts")
      if (response.status == 200) {
        const data = response.data
        this.dataList = data.map(item => ({name:item.keyword,value:[parseInt(item.count)]}))
        this.updateChartData()
      }
    },
    initChart() {
      this.chart = this.$echarts.init(document.getElementById("bubbleChart"));

      let bubbleChartData = [
      ];

      this.chart.setOption({
        tooltip: {
          show: true,
        },
        series: [
          {
            type: 'graph',
            layout: 'force',
            roam: true,
            label: {
              normal: {
                show: true,
              },
            },
            data: bubbleChartData.map(item => {
              return {
                name: item.name,
                // 设置气泡的大小
                symbolSize: item.value[0] / 10,
                // 设置气泡的颜色
                itemStyle: {
                  color: (() => {
                    const value = item.value[0];
                    if (value > 800) {
                      return 'rgba(255, 102, 102, 0.7)'; // 红色，透明度为0.7
                    } else if (value > 600) {
                      return 'rgba(255, 204, 102, 0.7)'; // 橙色，透明度为0.7
                    } else {
                      return 'rgba(102, 204, 255, 0.7)'; // 蓝色，透明度为0.7
                    }
                  })()
                },
                value: item.value
              };
            }),
            force: {
              repulsion: 100
            },
            rippleEffect: { // 水波纹效果
              period: 4, // 动画时间，值越小速度越快
              brushType: 'stroke', // 波纹绘制方式，stroke表示边缘波纹
              scale: 4 // 波纹圆环最大限制，值越大波纹越大
            },
            // 添加动画效果
            animation: true,
            animationDuration: 2000, // 动画时长，单位毫秒
            animationEasing: 'linear', // 动画缓动效果
            animationDurationUpdate: 2000, // 数据更新动画的时长
            animationEasingUpdate: 'linear', // 数据更新动画的缓动效果
            animationDelay: function(idx) { // 动画延迟
              return idx * 100; // 每个气泡的动画延迟时间
            },
            animationDelayUpdate: function(idx) { // 数据更新动画延迟
              return idx * 100; // 每个气泡的数据更新动画延迟时间
            },
          },
        ],
      });
    },
    updateChartData(){
      const ratio = this.avg / 50
      this.chart.setOption({
        series:[{
          data: this.dataList.map(item => {
            return {
              name: item.name,
              // 设置气泡的大小
              symbolSize: item.value[0] / ratio,
              // 设置气泡的颜色
              itemStyle: {
                color: (() => {
                  const value = item.value[0];
                  if (value > (this.avg * 4 / 5)) {
                    return 'rgba(255, 102, 102, 0.7)'; // 红色，透明度为0.7
                  } else if (value > (this.avg * 3 / 5)) {
                    return 'rgba(255, 204, 102, 0.7)'; // 橙色，透明度为0.7
                  } else {
                    return 'rgba(102, 204, 255, 0.7)'; // 蓝色，透明度为0.7
                  }
                })()
              },
              value: item.value
            };
          }),
        }]
      })
    }
  },
  beforeDestroy() {
    this.chart.dispose();
    this.chart = "";
  }
};
</script>

<style lang="scss" scoped>
.title-box {
  position: relative;
  width: 100%;
}

.title-container {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.title {
  color: #d1e6eb;
  font-size: 20px;
  text-align: center;
}

#bubbleChart {
  width: 100%;
  height: 40vh;
}
</style>
